<template>
    <div class="index-song-list">
        <el-card>
            <template #header>
                <ul class="list">
                    <span>{{ props.title }}</span>
                    <li v-for="item in props.menulist" :key="item" :class="{ 'li-check': item.name == index }"
                        @click="itemCheck(item)">{{ item.name }}</li>
                </ul>
            </template>
            <template #default>
                <el-row :gutter="0">
                    <el-col :span="8" v-for="item in 6" :key="item" v-if="loading">
                        <el-skeleton :rows="10" animated :loading="loading">
                            <template #template>
                                <div style="padding: 5px;">
                                    <el-skeleton-item variant="image" style="width: 100%;height: 198px; " />
                                </div>
                            </template>
                        </el-skeleton>
                    </el-col>
                    <el-col :span="24 / monthData.length * 2" v-for="item in monthData" :key="item.id" v-else>
                        <div class="item" @click="infoClick(item)">
                            <el-image :src="item.picUrl"></el-image>
                            <div class="info">
                                <div class="album-name">{{ item.name }}</div>
                                <div class="album-artist">{{ item.artist.name }}</div>
                                <div class="album-info">
                                    <span>
                                        {{ item.type == 'Single' ? '单曲' : item.type }}
                                    </span>
                                    <span>共{{ item.artists.length }}首</span>
                                </div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </template>
        </el-card>
    </div>
</template>

<script setup>
import { unitGtoW } from '@/utils/util'
import { getNewSong } from '@/api/index/IndexNewSong'
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router';
const router = useRouter()
const songListNum = ref(6)
const loading = ref(true)
const monthData = ref('')
const index = ref('')
const props = defineProps({
    title: {
        type: String,
        required: true
    },
    menulist: {
        type: Array,
        required: true
    }
})

onMounted(async () => {
    loading.value = true
    index.value = props.menulist[0].name
    const res = await getNewSong({
        area: 'ALL',
        limit: songListNum.value,
        offset: 0,
        t: Date.now()
    })
    monthData.value = [...res.monthData].slice(0, songListNum.value)
    loading.value = false
})

const itemCheck = async item => {
    index.value = item.name
    loading.value = true
    const res = await getNewSong({
        area: item.value,
        limit: songListNum.value,
        offset: 0,
        t: Date.now()
    })
    monthData.value = [...res.monthData].slice(0, songListNum.value)
    loading.value = false
}
const infoClick = item => {
    router.push({
        path: '/album?id=' + item.id,
    })
}
</script>

<style lang="less" scoped>
.list {
    list-style: none;
    padding: 0;

    span {
        float: left;
        font-size: 22px;
        margin: 0 20px 0;
        transform: translateY(-18px);
    }

    li {
        font-size: 14px;
        float: left;
        margin: 0 20px 0 0;
        transform: translateY(-10px);
    }

    .li-check {
        border-bottom: solid 3px #409eff;
    }

}


.item {
    background: #fbfbfb;
    margin: 5px;
    overflow: hidden;
    border-radius: 10px;
    position: relative;

    .el-image {
        width: 40%;
        height: 100%;
        position: relative;
        z-index: 99;
        border-radius: 10px;
    }

    &:hover::after {
        transform: rotate(180deg);
        left: 40px;
    }

    &:hover .info,
    &:hover .info .album-artist,
    &:hover .info .album-info {
        color: black;
    }

    &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 30px;
        width: 40%;
        height: 97%;
        transform: scale(1);
        z-index: 9;
        background: url('https://oss.haochongzb.com/zb/oss/net-easy/images/cd.png') no-repeat center center;
        background-size: 100% 100%;
        transition: all 1s;
    }

    .info {
        .album-name {
            position: absolute;
            top: 10%;
            left: 12.5vw;
            width: 12vw;
            // font-size: 20px;
            font-size: 1vw;
        }

        .album-artist {
            position: absolute;
            bottom: 25%;
            left: 12.5vw;
            width: 12vw;
            font-size: .9vw;
            color: #8b929b;
        }

        .album-info {
            position: absolute;
            bottom: 20px;
            left: 12.5vw;
            width: 12vw;
            font-size: .8vw;
            color: #8b929b;
            display: flex;
            justify-content: space-between;
        }
    }
}
</style>